<!-- 运行管理-设备保养记录 -->
<template>
  <div class="equip-wrap-common">
    <px-form style="padding-top: 16px" class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
      <px-row :gutter="16">
        <px-col :span="8">
          <px-form-item label="保养任务编号/名称">
            <px-input
              v-model="queryParams.value"
              placeholder="请输入保养任务编号/名称"
              maxlength="50"
              clearable
              @blur="queryParams.value = $event.target.value.trim()"
              @keyup.enter="queryTable"
            >
              <template #suffix>
                <px-icon style="cursor: pointer" @click="queryTable">
                  <search />
                </px-icon>
              </template>
            </px-input>
          </px-form-item>
        </px-col>
        <px-col :span="8">
          <px-form-item label="保养日期">
            <px-date-picker
              v-model="queryParams.taskDate"
              type="daterange"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              unlink-panels
              @change="changeDate"
            />
          </px-form-item>
        </px-col>
        <px-col :span="6">
          <px-button type="primary" @click="queryTable">查询</px-button>
          <px-button @click="resetTable">重置</px-button>
        </px-col>
      </px-row>
    </px-form>
    <px-table :data="tableData" class="equip-table" size="small" height="calc(100vh - 368px)" border>
      <px-table-column
        v-for="(item, index) in tableColumns"
        :key="index"
        :label="item.label"
        :min-width="item.minWidth"
        :align="item.align"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :fixed="item.fixed"
      >
        <template v-if="item.type === 'status'" #default="scope">
          <div class="status">
            <div class="circle" :style="{ backgroundColor: `${tagBgColorList[scope.row.status]}` }" />
            <p :style="{ color: `${tagBgColorList[scope.row.status]}` }">{{ scope.row.statusName }}</p>
          </div>
        </template>
        <template v-else-if="item.type === 'link'" #default="scope">
          <span style="color: #3b82f6; cursor: pointer" @click="handleView(scope.row)">{{ scope.row.jobNo }}</span>
        </template>
        <template v-else-if="item.type === 'impactEqpState'" #default="scope">{{
          scope.row.impactEqpState === true ? "是" : scope.row.impactEqpState === false ? "否" : "-"
        }}</template>
        <template v-else-if="item.type === 'earlyDate'" #default="scope">{{ scope.row.earlyDate }}</template>
        <template v-else-if="item.type === 'dueDate'" #default="scope">{{ scope.row.dueDate }}</template>
        <template v-else-if="item.type === 'lateDate'" #default="scope">{{ scope.row.lateDate }}</template>
        <template v-else #default="scope">{{
          scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
        }}</template>
      </px-table-column>
      <px-table-column fixed="right" label="操作" width="120" align="center">
        <template #default="scope">
          <px-tooltip content="详情" placement="top">
            <px-button link type="primary" icon="Tickets" @click="handleView(scope.row)" />
          </px-tooltip>
        </template>
      </px-table-column>
    </px-table>
    <pagination
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      class="equip-table-pagination"
      :total="total"
      @pagination="queryTable"
    />
  </div>
</template>

<script setup lang="ts">
import { getEpmTaskList } from "@/api/equip/runManage";
import { getToken } from "@/utils/auth";
import { onMounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const props = defineProps(["eqpId"]);
const tagBgColorList = {
  CREATED: "blue",
  ONGOING: "orange",
  PAUSED: "orange",
  CANCELLED: "red",
  COMPLETED: "green"
};
const state = reactive<any>({
  queryParams: {
    pageNum: 1,
    pageSize: 20
  },
  tableColumns: [
    { prop: "jobNo", label: "任务编号", minWidth: "180", type: "link", showOverflowTooltip: true, fixed: "left" },
    { prop: "name", label: "任务名称", minWidth: "180", showOverflowTooltip: true },
    { prop: "status", label: "任务状态", minWidth: "120", type: "status", showOverflowTooltip: true },
    { prop: "jobTypeName", label: "任务类型", minWidth: "120", showOverflowTooltip: true },
    { prop: "typeName", label: "保养类型", minWidth: "120", showOverflowTooltip: true },
    { prop: "triggerCode", label: "保养周期", minWidth: "120", showOverflowTooltip: true },
    { prop: "className", label: "科室", minWidth: "120", showOverflowTooltip: true },
    { prop: "systemName", label: "系统", minWidth: "160", showOverflowTooltip: true },
    // { prop: "groupName", label: "设备保养组", minWidth: "120", showOverflowTooltip: true },
    { prop: "opsGroupName", label: "运维组", minWidth: "120", showOverflowTooltip: true },
    { prop: "impactEqpState", label: "是否影响Fab机台", minWidth: "160", type: "impactEqpState", showOverflowTooltip: true },
    { prop: "earlyDate", label: "提前日期", minWidth: "160", type: "earlyDate", showOverflowTooltip: true },
    { prop: "dueDate", label: "目标日期", minWidth: "160", type: "dueDate", showOverflowTooltip: true },
    { prop: "lateDate", label: "延后日期", minWidth: "160", type: "lateDate", showOverflowTooltip: true },
    { prop: "planName", label: "计划名称", minWidth: "140", showOverflowTooltip: true },
    { prop: "planNo", label: "计划编号", minWidth: "140", showOverflowTooltip: true },
    { prop: "planStatusName", label: "计划状态", minWidth: "100", showOverflowTooltip: true }
  ],
  tableData: [],
  total: 0
});
const { queryParams, tableColumns, tableData, total } = toRefs(state);

// 进入页面时触发
onMounted(async () => {
  queryTable();
});

// 获取开始日期及结束日期
const changeDate = val => {
  if (val && val.length > 0) {
    queryParams.value.startTime = val[0] + " 00:00:00";
    queryParams.value.endTime = val[1] + " 23:59:59";
  } else {
    queryParams.value.startTime = "";
    queryParams.value.endTime = "";
  }
};
// 查询列表
const queryTable = async () => {
  queryParams.value.eqpId = props.eqpId;
  const params = JSON.parse(JSON.stringify(queryParams.value));
  const data = await getEpmTaskList(params);
  tableData.value = data?.data || [];
  total.value = data?.total || 0;
};
// 重置筛选条件列表
const resetTable = async () => {
  queryParams.value = {
    eqpId: props.eqpId,
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize
  };
  queryTable();
};

const accessToken = getToken().accessToken || "";

// 详情
const handleView = (row: any) => {
  const facCode = localStorage.getItem("facCode");
  router.push({
    path: "/all/equip/epm/task/list",
    query: {
      fullpath: `/pmJob/list?jobId=${row.id}&jobStatus=${row.status}&pmType=${row.type}&status=${row.statusName}&ssoToken=${accessToken}&facCode=${facCode}&isHiddenMenu=true`
    }
  });
};

// 表格样式
const getDateTableCellStyle = (item: any, type: string) => {
  const { earlyDate, dueDate, lateDate } = item;
  if (earlyDate && dueDate && lateDate) {
    const now = Date.parse(new Date());
    const early = Date.parse(earlyDate);
    const due = Date.parse(dueDate);
    const late = Date.parse(lateDate);

    if (type === "early") {
      return early <= now && now < due ? "yellow" : "";
    } else if (type === "due") {
      return due <= now && now < late ? "orange" : "";
    } else if (type === "late") {
      return now >= late ? "red" : "";
    } else {
      return "";
    }
  } else {
    return "";
  }
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");

.equip-wrap-common {
  height: calc(100vh - 231px);
  padding: 0;
  overflow-x: hidden;

  .status {
    display: flex;
    flex-direction: row;
    align-items: center;

    .circle {
      width: 8px;
      height: 8px;
      margin-right: 5px;
      border-radius: 50%;
    }
  }
}
</style>
